<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聊天机器人</title>
    <!-- 字体图标 -->
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css"
    />
    <!-- 初始化样式 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"
    />
    <!-- 公共 -->
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .container {
        width: 100%;
        height: 100%;
        background-color: #f5f4f4;
        position: relative;
        display: flex;
        flex-direction: column;
      }
    </style>
    <!-- 头部 -->
    <style>
      .top {
        width: 100%;
        height: 44px;
        padding: 15px 7px 12px 21px;
        background-color: #f5f4f4;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
      }
    </style>
    <!-- 好友名字 -->
    <style>
      .friend_name {
        width: 100%;
        height: 44px;
        padding: 14px 19px 14px;
        background-color: #f5f4f4;
        text-align: center;
        position: fixed;
        top: 44px;
        left: 0;
      }

      .friend_name img {
        width: 10px;
        height: 16px;
        position: absolute;
        left: 19px;
      }
    </style>
    <!-- 聊天区域 -->
    <style>
      .chat {
        width: 100%;
        /* 顶部留出88px的2个头部导航的高度 */
        /* 底部留出89px内边距让出固定在底部的对话框-防止遮挡 */
        /* 再多留出10px, 最后一条消息距离底部 */
        padding: 88px 20px 99px;
        flex: 1;
        overflow-y: scroll;
      }

      /* 隐藏滚动条 */
      .chat::-webkit-scrollbar {
        display: none;
      }

      .chat ul {
        padding-top: 20px;
      }

      .chat img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }

      .chat li {
        display: flex;
        align-items: top;
      }

      .chat li ~ li {
        /* 除了第一个li, 选择所有的兄弟li标签 */
        margin-top: 20px;
      }

      .chat .right {
        display: flex;
        justify-content: flex-end;
      }

      .left span {
        margin-left: 10px;
        border-radius: 1px 10px 1px 10px;
        display: inline-block;
        padding: 12px 16px;
        background-image: linear-gradient(180deg, #b1e393 0%, #50d287 100%);
        box-shadow: 2px 2px 10px 0px rgba(201, 201, 201, 0.1);
        color: #ffffff;
      }

      .right span {
        margin-right: 10px;
        border-radius: 1px 10px 1px 10px;
        display: inline-block;
        padding: 12px 16px;
        background: #ffffff;
        border: 1px solid rgba(247, 247, 247, 1);
        color: #000000;
      }
    </style>
    <!-- 底部区域(发送消息) -->
    <style>
      .bottom_div {
        width: 100%;
        height: 89px;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #ffffff;
        box-shadow: 0px -5px 7px 0px rgba(168, 168, 168, 0.05);
        border-radius: 25px 25px 0px 0px;
        padding: 15px 15px 0px 15px;
      }

      /* 外框盒子 */
      .send_box {
        display: flex;
      }

      .send_box img {
        width: 34px;
        height: 34px;
      }

      /* 输入框背景 */
      .input_bg {
        height: 35px;
        background: #f3f3f3;
        border-radius: 50px;
        padding-left: 17px;
        flex: 1;
        margin-right: 15px;
        /* 让input宽度高度 */
        display: flex;
      }

      .input_bg input {
        border: 0;
        outline: 0;
        background-color: transparent;
        display: inline-block;
        width: 100%;
      }

      /* 修改输入框默认占位文字
        webkit内核, firefox18-, firfox19+, 其他
        */
      .input_bg input::-webkit-input-placeholder,
      .input_bg input:-moz-placeholder,
      .input_bg input::-moz-placeholder,
      .input_bg input:-ms-input-placeholder {
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #c7c7c7;
        letter-spacing: 0;
        font-weight: 400;
      }

      /* 底部黑色小条 */
      .black_border {
        margin-top: 10px;
        height: 34px;
        text-align: center;
      }

      .black_border span {
        display: inline-block;
        background-color: #000;
        width: 105px;
        height: 4px;
        border-radius: 50px;
      }
    </style>
    <!-- PC端单独适配成移动大小 -->
    <style>
      /* PC端居中显示手机 */
      @media screen and (min-width: 1200px) {
        .container {
          width: 375px;
          margin: 0 auto;
          border: 1px solid black;
          /* 让fixed固定定位标签参照当前标签 */
          transform: translate(0px);
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <!-- 头部 -->
      <div class="top">
        <span>9:41</span>
        <div class="icon">
          <i class="iconfont icon-xinhao"></i>
          <i class="iconfont icon-xinhao1"></i>
          <i class="iconfont icon-electricity-full"></i>
        </div>
      </div>
      <!-- 好友名字 -->
      <div class="friend_name">
        <img src="./assets/arrow-left.png" alt="" />
        <span>使劲夸夸</span>
      </div>
      <!-- 聊天区域 -->
      <div class="chat">
        <ul class="chat_list">
          <!-- 他的消息 -->
          <!-- <li class="left">
            <img src="./assets/you.png" alt="" />
            <span>小宝贝</span>
          </li> -->
          <!-- 我的消息 -->
          <!-- <li class="right">
            <span>干啥</span>
            <img src="./assets/me.png" alt="" />
          </li> -->
        </ul>
      </div>
      <!-- 底部固定 -->
      <div class="bottom_div">
        <!-- 发送消息 -->
        <div class="send_box">
          <div class="input_bg">
            <input class="chat_input" type="text" placeholder="说点什么吧" />
          </div>
          <img class="send_img" src="./assets/send.png" alt="" />
        </div>
        <!-- 底部黑条 -->
        <div class="black_border">
          <span></span>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 获取机器人回答消息 - 接口地址: http://hmajax.itheima.net/api/robot
      // 查询参数名: spoken
      // 查询参数值: 我说的消息
      const list = document.querySelector('.chat_list')
      const chat = document.querySelector('.chat')
      const send_img = document.querySelector('.send_img')
      const input = document.querySelector('.chat_input')
      send_img.addEventListener('click', function (e) {
        // 用户输入内容


        // 获取输入框的值
        const spoken = input.value.trim()
        // 判断输入内容是否为空
        if (!spoken) return alert('输入内容不能为空')
        // 每点击一次创建一个li节点
        const li = document.createElement('li')
        // 给li添加类名
        li.classList.add('right')
        // 显示到html中
        li.innerHTML = `<span>${spoken}</span>
          <img src="./assets/me.png" alt="">`
        // 将li追加到父节点中
        list.appendChild(li)
        input.value = ''
        // 清空输入框

        // 每次点击就发送一次请求
        axios({
          url: 'http://hmajax.itheima.net/api/robot',
          params: {
            spoken,
          },
        }).then((res) => {
          // 机器人内容


          // 获取请求的数据显示到页面上
          const { data } = res
          console.log(data.data.info)
          // 每点击一次创建一个li节点
          const li = document.createElement('li')
          // 给li添加类名
          li.classList.add('left')
          // 显示到html中
          li.innerHTML = ` <img src="./assets/you.png" alt="" />
            <span>${data.data.info.text}</span>`
          // 将li追加到父节点中
          list.appendChild(li)
        })
      })
      // 监听输入框键盘弹起事件，如果是回车键，进行模拟点击
      input.addEventListener('keyup', function (e) {
        if (e.code === 'Enter') {
          send_img.click()
        }
      })
    </script>
  </body>
</html>
